<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
            background: #333;
            color: white;
        }
        .top {
            position: absolute;
            background: #333;
            width: 100%;
            height: 10%;
            font-size: 40px;
            text-align: center;
            line-height: 200%;
        }
        .left1 {
            position: absolute;
            background: #555;
            top: 10%;
            left: 0;
            width: 30%;
            height: 45%;
        }
        .left2 {
            position: absolute;
            background: #777;
            top: 55%;
            left: 0;
            width: 30%;
            height: 45%;
        }
        .center1 {
            position: absolute;
            background: #999;
            top: 10%;
            left: 30%;
            width: 40%;
            height: 30%;
            display: flex;
            flex-wrap: wrap;
        }
        .center1>div{
            width: 33.33%;
            text-align: center;
            font-size: 26px;
            font-weight: bold;
        }
        .center1>div>div{
            padding: 10px;
        }
        .center2 {
            position: absolute;
            background: #aaa;
            top: 40%;
            left: 30%;
            width: 40%;
            height: 60%;
        }
        .right1 {
            position: absolute;
            background: #ccc;
            top: 10%;
            right: 0;
            width: 30%;
            height: 45%;
        }
        .right2 {
            position: absolute;
            background: #eee;
            top: 55%;
            right: 0;
            width: 30%;
            height: 45%;
        }
    </style>
    <title>Document</title>
    <script src="./jquery-1.9.0.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./china.js"></script>
    <script>
        // https://news.qq.com/zt2020/page/feiyan.htm

        // 国内疫情情况
        // jsonp: https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5

        // 累计趋势, 新增趋势的 相关数据
        // ajax-cros: https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare

        function loadData1() {
            $.ajax({
                url: 'https://view.inews.qq.com/g2/getOnsInfo',
                data: 'name=disease_h5',
                type: 'get',
                dataType: 'jsonp'

            }).done(result => {
                let data = JSON.parse(result.data);
                console.log('result:', data);
                // 累计情况
                console.log('center1-chinaTotal:', data.chinaTotal);
                document.getElementById("confirmTotalDiv").innerText = data.chinaTotal.confirm;

                // 去除 showLoading 数据加载的动画效果
                map.hideLoading();

                // 数据处理
                let chinaData = [];
                data.areaTree[0].children.forEach(area=>{
                    chinaData.push({
                        name: area.name,
                        value: area.total.confirm
                    });
                });
                map.setOption({
                    series:{
                        data: chinaData
                    }
                });

            });
        }
        let map;
        function initChinaMap(){
            map = echarts.init(document.querySelector(".center2"), "dark");
            // 数据加载的动画效果
            map.showLoading();

            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c}'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    pieces: [// 分段图例
                        {start: 1, end: 9},
                        {start: 10, end: 99},
                        {start: 100, end: 999},
                        {start: 1000, end: 9999},
                        {start: 10000}
                    ],
                    inRange: {
                        color: ['#F9DCD1', '#8A3310']
                    }
                },
                series: [
                    {
                        name: '全国确诊人数',
                        type: 'map',
                        mapType: 'china', // 自定义扩展图表类型
                        label: {
                            show: true
                        },
                        data: [
                            {name: '新疆', value: 20}
                        ],
                        roam: true // 启用 拖拽/缩放
                    }
                ]
            }
            map.setOption(option);
        }

        $(()=>{
            initChinaMap();
            loadData1();
        });
    </script>
</head>
<body>
    <div class="top" >
        全国疫情实时监控
    </div>
    <div class="left1"></div>
    <div class="left2"></div>
    <div class="center1">
        <div>
            <div id="confirmTotalDiv" >99999</div>
            <div>累计确诊</div>
        </div>
        <div>
            <div>99999</div>
            <div>累计确诊</div>
        </div>
        <div>
            <div>99999</div>
            <div>累计确诊</div>
        </div>
        <div>
            <div>99999</div>
            <div>累计确诊</div>
        </div>
        <div>
            <div>99999</div>
            <div>累计确诊</div>
        </div>
        <div>
            <div>99999</div>
            <div>累计确诊</div>
        </div>
    </div>
    <div class="center2"></div>
    <div class="right1"></div>
    <div class="right2"></div>
</body>
</html>